<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

$(function(){
	$('#btn1').click(function(){
		var url = 'http://localhost:8080/user/getUser2';
		$.ajax({
			type : 'POST',
			url : url,
			dataType : 'json',
			data : null,
			success : function(data){
				console.log(data);
			},
			error : function(data){
				
			}
		});
	});
	$('#btn2').click(function(){
		var url = 'http://localhost:8080/user/getUser2';
		iframe = document.createElement('iframe'),
		iframe.style.display = 'none';
	    iframe.src = url;
	    document.body.appendChild(iframe);
	    iframe.onload = function() {
	    	$('#result').html(iframe.contentWindow.location.hash.substring(1));
	    	//alert(iframe.contentWindow.location.hash.substring(1));
	    	document.body.removeChild(iframe);

	    };
	});
	$('#btn3').click(function(){
		var url = 'http://localhost:8080/user/getUser3';
		iframe = document.createElement('iframe'),
		iframe.style.display = 'none';
	    iframe.src = url;
	    document.body.appendChild(iframe);
	    var state = 0;//标记一下，否则每次更改src都会执行reload
	    iframe.onload = function() {
	      if(state == 0){
	    	  //重新指向同源下的资源，否则还是不能发访问子iframe的信息
	    	  iframe.src = '/html/proxy.html';
	    	  state = 1;
	      }else{
	    	  //alert(iframe.contentWindow.name);
	    	  $('#result').html(iframe.contentWindow.name);
	    	  document.body.removeChild(iframe);
	      }
	    };
	});
	$('#btn4').click(function(){
		var url = 'http://localhost:8080/user/getUser4.json';
		$.ajax({
			type : 'POST',
			url : url,
			dataType : 'jsonp',
			data : null,
			callback:'callback',
			jsonpCallback: "jsonpCallback", 
			success : function(data){
				console.log(data);
				$('#result').html(data.user.name);
				//alert(data.user.name);
			},
			error : function(data){
				
			}
		});
	});
	$('#btn5').click(function(){
		var url = 'http://localhost/user/getUser4.json';
		$.ajax({
			type : 'POST',
			url : url,
			dataType : 'json',
			data : null,
			success : function(data){
				console.log(data);
				$('#result').html(data.user.name);
			},
			error : function(data){
				
			}
		});
	});
});

</script>
</head>
<body>

<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>
<div id="result">

</div>

</body>
</html>